<template>
  <view class="service-evaluation">
    <view class="evaluation-title">期待您的评价</view>
    
    <view class="star-rating">
      <u-rate v-model="rateValue" size="40rpx" active-icon="star-fill" active-color="#fadb14" inactive-color="#f5f5f5"  inactive-icon="star-fill"></u-rate>
      <text class="rating-text">{{ rateValue }} 星</text>
    </view>
    
    <view class="submit-btn">
      <u-button 
        size="small"
        type="primary" 
        customStyle="width: 160rpx; background-color: #2d8cf0;"
        @click="handleSubmit"
      >
        提交
      </u-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const rating = ref(0);
const rateValue = ref(0);
const emit = defineEmits(['submit']);


// 提交评价
const handleSubmit = () => {
  if (!rating.value) return;
  
  emit('submit', {
    rating: rating.value
  });
  
  // 提交后重置
  rating.value = 0;
  
  // 显示提交成功提示
  uni.showToast({
    title: '评价提交成功',
    icon: 'success'
  });
};
</script>

<style scoped lang="scss">
.service-evaluation {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 12rpx;
  margin: 20rpx;
  padding: 30rpx 20rpx;
}

.evaluation-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}

.star-rating {
  display: flex;
  gap: 20rpx;
  margin-bottom: 30rpx;
  
  .star-item {
    .chatIcon {
      font-size: 48rpx;
      transition: all 0.2s ease;
    }
    
    &:active {
      transform: scale(0.9);
    }
  }
  
  .rating-text {
    margin-left: 20rpx;
    font-size: 28rpx;
    color: #666;
  }
}

.submit-btn {
  display: flex;
  align-self: end;
}
</style>
